<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>职工管理</title>
	<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
	<script type="text/javascript" src="js/superJscript.js"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
	<link rel="stylesheet" href="./css/main.css"/>
	<link rel="stylesheet" href="https://at.alicdn.com/t/font_2150071_oqmbug6i2f.css"/>
  </head>
  <style>
	 body{
		 width:100%;
		 min-width: 900px;
		 height:100%
	 }
	 .searchBar{
		width:99%;
		margin: 0 auto;
		/* border: 2px solid #000000; */
	 }
	 .demoTable{
		 /* border: 1px solid #0000FF; */
		 height:100%;
		 width: 100%;
	 }
	 .container{
	   width: 350px;
	   height: 350px;
	   margin: 10px;
	   padding: 20px;
	   border-radius: 8px;
	   box-shadow: 0 3px 18px rgba(28, 19, 19, 0.5);
	   font-size: 16px;
	 }
	 .layui-form-item{
		 margin: 15px;
	 }
  </style>
  <body>
	  <!-- 搜索开始-->
	  <div class="searchBar">
		<form class="layui-form" action="">
			  <div class="layui-form-item">
		          <div class="layui-input-inline" style="width: 100px;">
		            <input type="text" class="layui-input" name="username" id="username" placeholder="用户名"/>
		          </div>
		          <div class="layui-input-inline" style="width: 100px;">
		            <input type="text" class="layui-input" name="name" id="name" placeholder="姓名"/>
		          </div>
				  <div class="layui-input-inline" style="width: 130px;">
				    <input type="text"  class="layui-input" name="tel" id="tel" placeholder="电话">
				  </div>
				  <div class="layui-input-inline" style="width: 200px;">
				    <input type="text"  class="layui-input" name="address" id="address" placeholder="地址">
				  </div>
				   <div class="layui-input-inline">
				        <button type="submit" class="layui-btn" lay-submit="" lay-filter="search">搜索</button>
				        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
				   </div>
				</div>  
		</form>
	  </div>
	  <!--搜索结束 -->
	  	  <!--行工具-->
	  	  <script type="text/html" id="barDemo">
	  	    <a class="layui-btn layui-btn-xs" lay-event="reSet">重置密码</a>
	  	    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	  	    <!-- 这里同样支持 laytpl 语法，如： -->
	  <!-- 	    {{#  if(d.auth > 2){ }}
	  	      <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
	  	    {{#  } }} -->
	  	  </script>
	  	  <!-- 行工具结束-->
	  <!-- 数据表格开始-->
	 <div class="demoTable">
		  <table class="layui-hide" id="user" lay-filter="user"></table> 
	</div>
	<!--数据表格结束  -->
   </body>
<!-- script开始 -->
	<!-- layui开始 -->
	<script src="layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript">
	layui.use(['table','layer','form','laydate'], function(){
			var table = layui.table;
			var layer = layui.layer;
			var form = layui.form;
			var laydate=layui.laydate;
			var search;
			
	laydate.render({
			  elem: '#birthday'
			});		
  //方法级渲染
  var tableIns=table.render({
    elem: '#user'
   ,url:'/user/list/'+sessionStorage.userId
   ,method:'post'
   ,contentType: 'application/json'
   ,even:true
   ,skin:'row'
   ,height:'full-100'
   ,where:{type:0}
	,toolbar: true//开启头部工具栏，并为其绑定左侧模板
    ,cols: [[
		{field:'id', title: 'ID',width:'0%', hide:true}
		,{field:'username', title: '用户名',width:'100',align:'center'}
		,{field:'name', title: '姓名',sort:true,width:'100',align:'center'}
		,{field:'sex', title: '性别',align:'center',
		templet:function(d){
			if(d.sex==1){
				return "男";
			}else{
				return "女";
			}
		}}
		,{field:'birthday',sort:true ,title: '生日',width:'150',align:'center'}
		,{field:'email', title: '邮箱',width:'160',align:'center'}
		,{field:'tel', title: '联系方式',width:'130',align:'center'}
		,{field:'address', title: '地址',width:'200',align:'center'}
		,{fixed:'right',title:'操作',align:'center',width:'250',
			templet:function(d){
				if(d.userType==2){
					return　'<a class="layui-btn layui-btn-xs" lay-event="reSet">重置密码</a>'+
	  	    '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>'+
			'<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="promote">升为管理员</a>'
				}else if(d.userType==1){
					return　'<a class="layui-btn layui-btn-xs" lay-event="reSet">重置密码</a>'+
					'<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>'
				}
			}
		}
    ]]
	,page: true
	,parseData: function(res) { //res 即为原始返回的数据
		  return {
			  "code": res.code, //解析接口状态
			  "msg": res.msg, //解析提示文本
			  "count": res.data.total, //解析数据长度
			  "data": res.data.records //解析数据列表
		  };
	  }
	  , response: {
		  statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
	  }
	  ,request: {
    	pageName: "displayStart",
		  limitName: "displayLength"
	  }
	,done:function(res,curr,count){
		console.log(res);
	}
  });
  
	var url;//添加或修改的url;
	var mainIndex;//关闭的弹出层索引
 
/*搜索表单提交 */
  form.on('submit(search)', function(data){
	  data.field.type = 0;
		table.reload('user',{
			where: data.field,
			page:{
				curr :1,
			},
		})
	  return false;
        });

  //删除方法
  function del(codeId) {
	  layer.confirm("您确定要删除吗？",function(){
		  $.ajax({
			  type:"DELETE",
			  url: '/user/deleteByIds',
			  contentType:'application/json',
			  data:JSON.stringify({"ids":codeId}),
			  success:function (data) {
				  layer.closeAll('loading');
				  if(data.code==200){
					  layer.msg('删除成功！', {icon: 1,time:2000,shade:0.2});
					  location.reload(true);
				  }else{
					  layer.msg('删除失败！', {icon: 2,time:3000,shade:0.2});
				  }
			  }
		  })
	  })
  }

//监听行工具事件
  table.on('tool(user)', function(obj){
	var data = obj.data; //获得当前行数据
	var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
    if(layEvent === 'reSet'){
    	layer.confirm("您确定要重置"+data.username+"的密码吗",function(){
			$.ajax({
				url:'/user/resetPwd/'+data.id,
				contentType:'application/json',
				success:function (data) {
						 layer.closeAll('loading');
						if(data.code==200){
						layer.msg('重置成功！', {icon: 1,time:2000,shade:0.2});
							tableIns.reload();
						}else{
							layer.msg('重置失败！', {icon: 2,time:3000,shade:0.2});
						 }
				}
			})
		})
    }else if(layEvent==='del'){
		del([data.id]);
	}else if(layEvent==='promote'){
		layer.confirm("您确定要提升 "+data.username+" 为管理员吗",function(){
			$.ajax({
				url:'/user/manage/'+data.id,
				contentType:'application/json',
				success:function (data) {
						layer.closeAll('loading');
						if(data.code==200){
						layer.msg('权限更改成功！', {icon: 1,time:2000,shade:0.2});
							tableIns.reload();
						}else{
							layer.msg('权限更改失败！', {icon: 2,time:3000,shade:0.2});
						 }
				}
			})
		})
	}
  })

});
</script>
</html>